<template>
  <view class="container">
    <!-- <web-view src="/static/map/map.html"></web-view> -->
    <!-- <view
      id="mapContainer"
      style="width: 100%; height: calc(100vh - 88rpx)"
    ></view>
    <view class="info">
      <text>经度: {{ longitude }}</text>
      <text>纬度: {{ latitude }}</text>
    </view> -->
    <div id="amap" class="map"></div>
  </view>
</template>

<script setup>
  import { onMounted } from "vue";

  onMounted(() => {
    // 动态加载高德地图JS
    if (!window.AMap) {
      const script = document.createElement("script");
      script.type = "text/javascript";
      script.src =
        "https://webapi.amap.com/maps?v=2.0&key=yourcode";
      script.onload = initMap;
      document.head.appendChild(script);
    } else {
      initMap();
    }

    function initMap() {
      // eslint-disable-next-line
      new window.AMap.Map("amap", {
        zoom: 11,
        center: [116.397428, 39.90923], // 北京天安门
      });
    }
  });
</script>
<style>
  .container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  .map {
    width: 100vw;
    height: 100vh;
  }
  .info {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 5px;
    z-index: 999;
  }
</style>
